<template>
    <header
        v-if="settings.header"
        class="caih-admin-header"
        :class="{ 'caih-admin-header-fixed': settings.fixedHeader }"
    >
        <div class="caih-admin-header-content">
            <div class="site-info">
                <img src="/logo.png" alt="" />
                <strong>{{ settings.title }}</strong>
            </div>
            <UserToolBar />
        </div>
    </header>
    <section class="caih-admin-layout" :class="{ 'caih-admin-layout-fixed-side': settings.fixedSide }">
        <aside v-if="settings.menu" class="caih-admin-side" :class="{ collapse: settings.collapsed }">
            <div class="side-menu">
                <el-scrollbar>
                    <el-menu :default-active="activedMenu" router :collapse="settings.collapsed">
                        <MenuItem :menus="menu.menus" first-level />
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="side-bottom">
                <el-icon @click="settings.switchSettings('collapsed', !settings.collapsed)">
                    <ElIconExpand v-if="settings.collapsed" />
                    <ElIconFold v-else />
                </el-icon>
            </div>
        </aside>
        <div class="caih-admin-container">
            <div class="caih-admin-toolbar">
                <Breadcrumb />
                <Tags />
            </div>
            <div class="caih-admin-content">
                <main class="caih-admin-main">
                    <RouterView v-slot="{ Component }" v-if="settings.keepAlive">
                        <KeepAlive :include="tags.aliveTags">
                            <component v-if="tags.viewVisible" :key="route.name" :is="Component" />
                        </KeepAlive>
                    </RouterView>
                    <RouterView v-else />
                </main>
                <Footer v-if="settings.footer" type="white" />
            </div>
        </div>
    </section>
    <Settings v-if="settings.DEV" />
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useTagsStore } from "@/stores/tags";
import { useMenuStore } from "@/stores/menu";
import { useSettingsStore } from "@/stores/settings";

import UserToolBar from "./components/user-tool-bar.vue";
import Breadcrumb from "./components/breadcrumb.vue";
import Tags from "./components/tags.vue";
import MenuItem from "./components/menu-item.vue";
import Settings from "./components/settings.vue";
import Footer from "./components/footer.vue";

const route = useRoute();
const tags = useTagsStore();
const menu = useMenuStore();
const settings = useSettingsStore();

const activedMenu = computed(() => {
    if (route.meta.hideInMenu) {
        const parent = route.meta.breadcrumb.slice(-2)[0];
        if (parent) return parent.path;
        else return "";
    }
    return route.path;
});
</script>

<style lang="scss" scoped>
.caih-admin-header {
    --caih-admin-header-height: 60px;

    flex: none;
    width: 100%;
    height: var(--caih-admin-header-height);
    position: relative;
    z-index: 1;
    &.caih-admin-header-fixed {
        .caih-admin-header-content {
            position: fixed;
            left: 0;
            top: 0;
        }
    }
    .caih-admin-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: var(--caih-admin-header-height);
        background: #1e1e2d;
        overflow-x: hidden;
    }
    .site-info {
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #fff;
        letter-spacing: 1px;
        font-weight: 700;
        padding-left: 20px;
        img {
            width: auto;
            height: 44px;
        }
        strong {
            display: flex;
            align-items: center;
            margin-left: 12px;
            &::before {
                content: "";
                width: 1px;
                height: 30px;
                background: rgba(#fff, 0.45);
                margin-right: 12px;
            }
        }
    }
}
.caih-admin-layout {
    flex: 1;
    display: flex;
    &.caih-admin-layout-fixed-side {
        overflow: auto;
    }
    .caih-admin-side {
        flex: none;
        display: flex;
        flex-direction: column;
        width: 208px;
        background: #fff;
        box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset;
        &.collapse {
            width: 48px;
        }
        .side-menu {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            :deep() {
                .el-scrollbar__bar.is-horizontal {
                    display: none !important;
                }
                .el-menu {
                    border-right: none;
                    background: none;
                }
            }
        }
        .side-bottom {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            .el-icon {
                width: 48px;
                height: 48px;
                font-size: 22px;
                cursor: pointer;
            }
        }
    }
    .caih-admin-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .caih-admin-toolbar {
            flex: none;
        }
        .caih-admin-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }
        .caih-admin-main {
            flex: 1;
            padding: 20px;
        }
    }
}
</style>
